<template>
  <view class="equipmentDetail">
    <view class="equipmentDetail-hedaer">
      <view class="soc-view">
        <chartPage
          :innerRingColor="
            initData.workStatusType == -1 // 故障
              ? '#FA3B3D'
              : initData.workStatusType == 0 // 空闲
              ? '#64B7F6'
              : initData.workStatusType == 1 // 运行
              ? '#34C759'
              : ''
          "
          :fillBgColor="
            initData.workStatusType == -1 // 故障
              ? 'linear-gradient(180deg, #0F1F2F 2%, #FA3B3D 86%)'
              : initData.workStatusType == 0 // 空闲
              ? 'linear-gradient(180deg, #0F1F2F 2%, #64B7F6 86%)'
              : initData.workStatusType == 1 // 运行
              ? 'linear-gradient(180deg, #0F1F2F 2%, #34C759 86%)'
              : ''
          "
          :batteryPercentage="Number(initData.soc)"
        />
        <view class="operationalStatus">
          <view v-if="initData.workStatus">
            {{ initData.workStatus }}
          </view>
        </view>
      </view>
      <view class="electricity-detail">
        <up-row>
          <up-col span="6">
            <view class="electricity-detail-item">
              <view class="number">
                {{ powerUnit(initData.systemActivePower, 0) }}
              </view>
              <image class="img" src="/static/dividingLine-icon.png" mode="" />
              <view class="electricity-type">
                {{ t("equipmentDetail.realTimePower") }}
              </view>
              <view class="unit">
                ({{ powerUnit(initData.systemActivePower, 1) }})
              </view>
            </view>
          </up-col>
          <up-col span="6">
            <view class="electricity-detail-item">
              <view class="electricity-detail-item">
                <view class="number">
                  {{ chargeUnit(initData.cumulativeCharge, 0) }}
                </view>
                <image
                  class="img"
                  src="/static/dividingLine-icon.png"
                  mode=""
                />
                <view class="electricity-type">
                  {{ t("equipmentDetail.totalCharge") }}
                </view>
                <view class="unit">
                  ({{ chargeUnit(initData.cumulativeCharge, 1) }})
                </view>
              </view>
            </view>
          </up-col>
        </up-row>
        <up-row style="margin-top: 30rpx">
          <up-col span="6">
            <view class="electricity-detail-item">
              <view class="electricity-detail-item">
                <view class="number">{{ initData.efficiency }}</view>
                <image
                  class="img"
                  src="/static/dividingLine-icon.png"
                  mode=""
                />
                <view class="electricity-type">
                  {{ t("equipmentDetail.equipmentEfficiency") }}
                </view>
                <view class="unit"> (%) </view>
              </view>
            </view>
          </up-col>
          <up-col span="6">
            <view class="electricity-detail-item">
              <view class="electricity-detail-item">
                <view class="number">
                  {{ chargeUnit(initData.cumulativeDischarge, 0) }}
                </view>
                <image
                  class="img"
                  src="/static/dividingLine-icon.png"
                  mode=""
                />
                <view class="electricity-type">
                  {{ t("equipmentDetail.totalDischarge") }}
                </view>
                <view class="unit">
                  ({{ chargeUnit(initData.cumulativeDischarge, 1) }})
                </view>
              </view>
            </view>
          </up-col>
        </up-row>
      </view>
    </view>
    <equipmentList
      :tabList="tabList"
      ref="equipmentListRef"
      @handleTableChnange="getSummaryData"
      @goSiteDeviceDetails="goSiteDeviceDetails"
      :dataListSummaryDataBMS="dataListSummaryDataBMS"
      :dataListSummaryDataDCDC="dataListSummaryDataDCDC"
      :dataListSummaryDataMPPT="dataListSummaryDataMPPT"
      :dataListSummaryDataPCS="dataListSummaryDataPCS"
    />
    <!-- 功率分析 -->
    <view class="page-item">
      <powerAnalyse
        @handleTime="handlePowerAnalysis"
        ref="powerAnalyseRefs"
        :powerChart="powerChart"
      />
    </view>
    <!-- 充分分析 -->
    <view class="page-item" v-show="Object.keys(suffChart).length !== 0">
      <sufficiencyAnalyse :suffChart="suffChart" />
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import equipmentList from "./components/equipmentList.vue";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import apis from "@/apis/index";
import {
  powerUnit,
  chargeUnit,
  calculateAverage,
  formatPowerUnitOfUnit,
  formatElectricityOfUnit,
} from "@/utils/utils";
const powerAnalyseRefs = ref(null);
const powerChart = ref({});
const suffChart = ref({});
const tabList = ref([]);
const siteName = ref("");
const pageData = ref({});
const equipmentListRef = ref(null);

const dataListSummaryDataBMS = ref({});
const dataListSummaryDataDCDC = ref({});
const dataListSummaryDataMPPT = ref({});
const dataListSummaryDataPCS = ref({});
const aggregateDataNumber = ref();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const initData = ref({
  cumulativeCharge: 0,
  cumulativeDischarge: 0,
  efficiency: "",
  siteId: "",
  slaveId: "",
  soc: "",
  systemActivePower: 0,
  workStatus: "",
  workStatusType: 0,
});
onLoad((options) => {
  pageData.value = JSON.parse(options.params);
  siteName.value = options.siteName;
  uni.setNavigationBarTitle({
    title: pageData.value.deviceName,
  });
  init();
});

const goSiteDeviceDetails = (params) => {
  let deliverParams = 0;
  let deliverName = "";
  switch (params) {
    case 1:
      deliverParams = aggregateDataNumber.value.bmsNumber;
      deliverName = "BMS";
      break;
    case 2:
      deliverParams = aggregateDataNumber.value.dcdcNumber;
      deliverName = "DCDC";
      break;
    case 3:
      deliverParams = aggregateDataNumber.value.mpptNumber;
      deliverName = "MPPT";
      break;
    case 4:
      deliverParams = aggregateDataNumber.value.pcsNumber;
      deliverName = "PCS";
      break;
    default:
  }
  uni.navigateTo({
    url: `/pages/siteDeviceDetails/siteDeviceDetails?siteId=${
      pageData.value.siteId
    }&slaveId=${
      pageData.value.slaveId
    }&type=${params}&moduleNumber=${deliverParams}&name=${
      pageData.value.deviceName + "-" + deliverName
    }`,
  });
};

const init = (callback) => {
  let params = {
    siteId: pageData.value.siteId,
    slaveId: pageData.value.slaveId,
  };
  apis.getEquipmentDetails(params).then((res) => {
    if (res.code == 200) {
      initData.value = res.data;
    }
  });
  // 获取模块数量
  getModulNumber();

  // 功率分析
  handlePowerAnalysis();
  // 充放分析
  handleChargeAndDischarge();

  nextTick(() => {
    if (callback) {
      callback();
    }
  });
};

const getModulNumber = () => {
  let params = {
    siteId: pageData.value.siteId,
    slaveId: pageData.value.slaveId,
  };
  apis.getEquipmentqueryDeviceModuleNumber(params).then((res) => {
    let arr = [];
    if (res.code == 200) {
      aggregateDataNumber.value = res.data;
      if (res.data.bmsNumber > 0) {
        arr.push({
          name: "BMS",
          code: 1,
        });
      }
      if (res.data.dcdcNumber > 0) {
        arr.push({
          name: "DCDC",
          code: 2,
        });
      }
      if (res.data.mpptNumber > 0) {
        arr.push({
          name: "MPPT",
          code: 3,
        });
      }
      if (res.data.pcsNumber > 0) {
        arr.push({
          name: "PCS",
          code: 4,
        });
      }
      tabList.value = arr;
      if (arr.length > 0) {
        getSummaryData();
      }
    }
  });
};
const getSummaryData = () => {
  nextTick(() => {
    if (equipmentListRef.value) {
      const type = equipmentListRef.value.getTabListKey(); // 1 BMS 2 DCDC 3 MPPT 4 PCS
      let params = {
        siteId: pageData.value.siteId,
        slaveId: pageData.value.slaveId,
      };
      switch (type) {
        case 1:
          apis.getBmsSummary(params).then((res) => {
            console.log("BMS", res);
            if (res.code == 200) {
              dataListSummaryDataBMS.value = res.data;
            }
          });
          break;
        case 2:
          apis.getDcdcSummary(params).then((res) => {
            console.log("DCDC", res);
            if (res.code == 200) {
              dataListSummaryDataDCDC.value = res.data;
            }
          });
          break;
        case 3:
          apis.getMpptSummary(params).then((res) => {
            console.log("MPPT", res);
            if (res.code == 200) {
              dataListSummaryDataMPPT.value = res.data;
            }
          });
          break;
        case 4:
          apis.getPcsSummary(params).then((res) => {
            console.log("PCS", res);
            if (res.code == 200) {
              dataListSummaryDataPCS.value = res.data;
            }
          });
          break;
        default:
      }
    }
  });
};

onPullDownRefresh(() => {
  // 下拉刷新时重新获取数据;
  init(() => {
    // 数据获取完成后停止下拉刷新动画
    uni.stopPullDownRefresh();
  });
});

// 充放分析
const handleChargeAndDischarge = () => {
  let params = {
    siteId: pageData.value.siteId,
    slaveId: pageData.value.slaveId,
  };
  apis.getEquipmentChargeAnalysis(params).then((res) => {
    if (res.code == 200) {
      let createDateArr = []; // 时间

      let chargeArr = []; // 充电量
      let dischargeArr = []; // 放电量
      let efficiencyArr = []; // 效率

      let chargeArrTest = []; // 充电量
      let dischargeArrTest = []; // 放电量
      let efficiencyArrTest = []; // 效率
      res.data.forEach((item, index) => {
        chargeArrTest.push(Number(item.charge));
        dischargeArrTest.push(Number(item.discharge));
      });
      console.log("充电", chargeArrTest);
      console.log("放电", dischargeArrTest);
      const pinjin = calculateAverage(
        ...chargeArrTest,
        ...dischargeArrTest,
        ...efficiencyArrTest
      );
      const unit = chargeUnit(pinjin, 1);

      res.data.forEach((item, index) => {
        chargeArr.push(formatElectricityOfUnit(item.charge, unit));
        createDateArr.push(item.createDate);
        dischargeArr.push(formatElectricityOfUnit(item.discharge, unit));
        if (item.efficiency >= 70 && item.efficiency <= 100) {
          efficiencyArr.push(item.efficiency);
        } else {
          efficiencyArr.push(null); // 过滤掉小于 70% 和大于 100% 的数据
        }
      });
      // 计算 Y 轴最大数值的字符长度
      const maxValue = Math.max(
        ...chargeArr,
        ...dischargeArr,
        ...efficiencyArr
      );

      let maxVal = Math.max(...chargeArr, ...dischargeArr);
      const yAxisMax = maxVal <= 50 ? 50 : Math.ceil(maxVal * 1.1);

      if (
        chargeArr.length > 0 &&
        dischargeArr.length > 0 &&
        efficiencyArr.length > 0
      ) {
        console.log("efficiencyArr", efficiencyArr);
        const maxLength = maxValue.toString().length;
        // 根据字符长度动态调整 grid 的 left 值
        const baseLeft = -2; // 基础 left 百分比
        const additionalLeft = maxLength * 2; // 每个字符增加 2% 的 left 值
        const newLeft = Math.min(baseLeft + additionalLeft, 30); // 最大不超过 30%
        const highestEfficiency = Math.max(...efficiencyArr);
        const minimalEfficiency = Math.min(...efficiencyArr);

        const chartOfSuff = {
          title: [
            {
              text: unit,
              top: 30,
              left: 16,
              textStyle: {
                fontSize: 10, // 标题字体大小
                color: "#6E7180", // 标题字体颜色，这里设置为红色
              },
            },
            {
              text: "%",
              top: 30,
              right: 40,
              textStyle: {
                fontSize: 10, // 标题字体大小
                color: "#6E7180", // 标题字体颜色，这里设置为红色
              },
            },
          ],
          xAxis: {
            type: "category",
            data: createDateArr,
          },
          yAxis: [
            {
              type: "value",
              max: yAxisMax,
              axisLabel: {
                show: true,
                color: "#6e7180",
              },
              axisTick: {
                lineStyle: {
                  type: "dashed", // 设置 y 轴刻度线为虚线
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed", // 设置 y 轴网格线为虚线
                  color: "#6e7180", // 修改 x 轴网格横线颜色为红色
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#6e7180",
                },
              },
            },
            {
              type: "value",
              position: "right", // 将该纵轴放置在右侧
              nameTextStyle: {
                color: "#6e7180", // 纵轴名称文字颜色
              },
              axisLabel: {
                show: true,
                color: "#6e7180",
                formatter: "{value}", // 显示百分比格式
              },
              splitLine: {
                show: false, // 不显示网格线
              },
              splitLine: {
                show: false, // 不显示网格线
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#6e7180",
                },
              },
              min: minimalEfficiency < 0 ? minimalEfficiency : 0, // 最小值
              max: 150, // 最大值
            },
          ],
          tooltip: {
            show: true,
            trigger: "axis",
            position: function (point, params, dom, rect, size) {
              // point: 鼠标位置，格式为 [x, y]
              // params: 提示框所对应的数据项
              // dom: 提示框的 DOM 节点
              // rect: 图表的 DOM 节点的矩形框信息
              // size: 提示框的大小信息，格式为 {contentSize: [width, height], viewSize: [width, height]}
              let x = point[0];
              let y = point[1];
              let viewWidth = size.viewSize[0];
              let viewHeight = size.viewSize[1];
              let boxWidth = size.contentSize[0];
              let boxHeight = size.contentSize[1];

              // 确保 tooltip 在页面内完全显示
              if (x + boxWidth > viewWidth) {
                x = viewWidth - boxWidth;
              }
              if (y - boxHeight < 0) {
                y = boxHeight;
              }

              return [x, y - boxHeight]; // 将 tooltip 放到鼠标上方
            },
            backgroundColor: "#fff", // 设置背景颜色为白色
            borderColor: "#ccc", // 设置边框颜色
            borderWidth: 1, // 设置边框宽度
            extraCssText: "box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);", // 添加阴影效果
            formatter: function (params) {
              let xAxisValue = params[0].axisValue; // 获取 x 轴时间
              let tooltipStr = `${xAxisValue}\n`; // 将 x 轴时间添加到最上面一行
              params.forEach(function (param) {
                if (param.seriesName === t("siteDetail.efficiency")) {
                  // 确保效率数据后面带有 % 单位
                  if (param.value < 70 || param.value > 100 || !param.value) {
                    tooltipStr += `${param.seriesName}: - \n`;
                  } else {
                    tooltipStr += `${param.seriesName}: ${param.value}% \n`;
                  }
                } else {
                  tooltipStr += `${param.seriesName}: ${param.value} ${unit} \n`;
                }
              });
              return tooltipStr.replace(/\n$/, ""); // 移除末尾 <br/>
            },
          },
          legend: {
            icon: "rect",
            right: "10%",
            itemWidth: 12,
            itemHeight: 8,
            itemStyle: {
              borderRadius: 20, // 调整后的圆角值
              borderWidth: 0, // 设置边框宽度为0
            },
            textStyle: {
              // 设置图例文字的大小
              fontSize: 10,
              // 设置图例文字的颜色
              color: "#6e7180",
            },
            data: [
              {
                name: t("equipmentDetail.chargeCapacity"),
                icon: "rect",
                itemStyle: {
                  color: "#8BDACC", // 对应充电量折线图线条颜色
                },
              },
              {
                name: t("equipmentDetail.dischargeAmount"),
                icon: "rect",
                itemStyle: {
                  color: "#5EABE6", // 对应放电量折线图线条颜色
                },
              },
              {
                name: t("equipmentDetail.efficiency"),
                icon: "rect",
                itemStyle: {
                  color: "#9670F9", //对应效率折线图线条颜色
                },
              },
            ],
          },
          grid: {
            top: "20%", // 上边距
            right: "6%", // 右边距
            bottom: "1%", // 下边距
            left: newLeft, // 左边距
            containLabel: true, // 是否包含坐标轴的标签
          },

          series: [
            {
              name: t("equipmentDetail.chargeCapacity"),
              type: "bar", // 修改为柱状图
              data: chargeArr,
              yAxisIndex: 0, // 使用第一个 y 轴（左侧）
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#192E3D", // 渐变起始颜色，降低透明度
                    },
                    {
                      offset: 1,
                      color: "#8BDACC", // 渐变结束颜色，降低透明度
                    },
                  ],
                },
                borderRadius: [20, 20, 20, 20], // 设置上下圆角
              },
            },
            {
              name: t("equipmentDetail.dischargeAmount"),
              type: "bar", // 修改为柱状图
              data: dischargeArr,
              yAxisIndex: 0, // 使用第一个 y 轴（左侧）
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#2B4C65", // 渐变起始颜色，降低透明度
                    },
                    {
                      offset: 1,
                      color: "#5EABE6", // 渐变结束颜色，降低透明度
                    },
                  ],
                },
                borderRadius: [20, 20, 20, 20], // 设置上下圆角
              },
            },
            {
              name: t("equipmentDetail.efficiency"),
              smooth: true,
              symbol: "circle", // 在曲线上添加小点
              symbolSize: 6, // 小点的大小
              itemStyle: {
                color: "#9670F9", // 小点颜色
              },
              data: efficiencyArr,
              yAxisIndex: 1, // 使用第二个 y 轴（右侧）
              type: "line",
              lineStyle: {
                color: "#9670F9", // 修改线条颜色为红色
              },
            },
          ],
          dataZoom: [
            {
              type: "inside", // 内部缩放
              xAxisIndex: 0,
              start: 0,
              end: (7 / createDateArr.length) * 100, // 默认展示前 6 个数据
              zoomOnMouseWheel: false, // 禁止鼠标滚轮缩放
              moveOnMouseMove: true, // 允许鼠标拖动
              moveOnMouseWheel: false, // 禁止鼠标滚轮移动
            },
          ],
        };
        // suffChart
        suffChart.value = chartOfSuff;
      } else {
        suffChart.value = {};
      }
    }
  });
};

// 功率分析
const handlePowerAnalysis = () => {
  nextTick(() => {
    let params = {
      currTime: powerAnalyseRefs.value.getTimeJson(),
      siteId: pageData.value.siteId,
      slaveId: pageData.value.slaveId,
    };

    apis.getEquipmentPowerAnalysis(params).then((res) => {
      console.log("res功率分析", res);
      if (res.code == 200) {
        let currTimeArr = []; //时间
        let gridActivePowerTest = []; // 电网功率
        let loadActivePowerTest = []; //负载功率
        let systemActivePowerTest = []; // 储能功率
        res.data.forEach((item) => {
          gridActivePowerTest.push(item.gridActivePower);
          loadActivePowerTest.push(item.loadActivePower);
          systemActivePowerTest.push(item.systemActivePower);
        });
        let arr = calculateAverage(
          ...gridActivePowerTest,
          ...loadActivePowerTest,
          ...systemActivePowerTest
        );
        let unit = powerUnit(arr, 1);
        let gridActivePower = []; // 电网功率
        let loadActivePower = []; //负载功率
        let systemActivePower = []; // 储能功率
        res.data.forEach((item) => {
          currTimeArr.push(item.currTime);
          gridActivePower.push(
            formatPowerUnitOfUnit(item.gridActivePower, unit)
          );
          loadActivePower.push(
            formatPowerUnitOfUnit(item.loadActivePower, unit)
          );
          systemActivePower.push(
            formatPowerUnitOfUnit(item.systemActivePower, unit)
          );
        });
        // 计算 Y 轴最大数值的字符长度
        const maxValue = Math.max(
          ...gridActivePower,
          ...loadActivePower,
          ...systemActivePower
        );
        const yAxisMax = maxValue <= 125 ? 125 : Math.ceil(maxValue * 1.1);
        if (
          gridActivePower.length > 0 &&
          loadActivePower.length > 0 &&
          systemActivePower.length > 0
        ) {
          const maxLength = maxValue.toString().length;
          // 根据字符长度动态调整 grid 的 left 值
          const baseLeft = -2; // 基础 left 百分比
          const additionalLeft = maxLength * 2; // 每个字符增加 2% 的 left 值
          const newLeft = Math.min(baseLeft + additionalLeft, 30); // 最大不超过 30%
          const powerOption = {
            title: {
              text: unit,
              top: 10,
              left: 16,
              textStyle: {
                fontSize: 10, // 标题字体大小
                color: "#6E7180", // 标题字体颜色，这里设置为红色
              },
            },
            xAxis: {
              type: "category",
              data: currTimeArr,
            },
            yAxis: {
              type: "value",
              max: yAxisMax,
              axisLabel: {
                show: true,
                color: "#6e7180",
              },
              axisTick: {
                lineStyle: {
                  type: "dashed", // 设置 y 轴刻度线为虚线
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: "dashed", // 设置 y 轴刻度线为虚线
                  color: "#6e7180", // 修改 x 轴网格横线颜色为红色
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#6e7180",
                },
              },
            },

            // tooltip: {
            //   show: false, // 关闭 tooltip 展示
            // },
            tooltip: {
              show: true,
              trigger: "axis",
              width: 300,
              position: function (point, params, dom, rect, size) {
                // point: 鼠标位置，格式为 [x, y]
                // params: 提示框所对应的数据项
                // dom: 提示框的 DOM 节点
                // rect: 图表的 DOM 节点的矩形框信息
                // size: 提示框的大小信息，格式为 {contentSize: [width, height], viewSize: [width, height]}
                let x = point[0];
                let y = point[1];
                let viewWidth = size.viewSize[0];
                let viewHeight = size.viewSize[1];
                let boxWidth = size.contentSize[0];
                let boxHeight = size.contentSize[1];

                // 确保 tooltip 在页面内完全显示
                if (x + boxWidth > viewWidth) {
                  x = viewWidth - boxWidth;
                }
                if (y - boxHeight < 0) {
                  y = boxHeight;
                }

                return [x, y - boxHeight]; // 将 tooltip 放到鼠标上方
              },
              backgroundColor: "#fff", // 设置背景颜色为白色
              borderColor: "#ccc", // 设置边框颜色
              borderWidth: 1, // 设置边框宽度
              extraCssText: "box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);", // 添加阴影效果
              formatter: function (params) {
                let xAxisValue = params[0].axisValue; // 获取 x 轴时间
                let tooltipStr = `${xAxisValue}\n`; // 将 x 轴时间添加到最上面一行
                params.forEach(function (param) {
                  tooltipStr += `${param.seriesName}: ${param.value + unit} \n`;
                });
                return tooltipStr.replace(/\n$/, ""); // 移除末尾 <br/>
              },
            },
            legend: {
              icon: "rect",
              right: "5%",
              itemWidth: 12,
              itemHeight: 8,
              itemStyle: {
                borderRadius: 20, // 调整后的圆角值
                borderWidth: 0, // 设置边框宽度为0
              },
              textStyle: {
                // 设置图例文字的大小
                fontSize: 10,
                // 设置图例文字的颜色
                color: "#6e7180",
              },
              data: [
                {
                  name: t("equipmentDetail.energyStoragePower"),
                  icon: "rect",
                  itemStyle: {
                    color: "#64B7F6", // 对应储能功率折线图线条颜色
                  },
                },
                {
                  name: t("equipmentDetail.gridPower"),
                  icon: "rect",
                  itemStyle: {
                    color: "#805EDA", // 对应电网功率折线图线条颜色
                  },
                },
                {
                  name: t("equipmentDetail.loadPower"),
                  icon: "rect",
                  itemStyle: {
                    color: "#FFA200", //对应负载功率折线图线条颜色
                  },
                },
              ],
            },
            grid: {
              top: "12%", // 上边距
              right: "6%", // 右边距
              bottom: "1%", // 下边距
              left: newLeft, // 左边距
              containLabel: true, // 是否包含坐标轴的标签
            },
            series: [
              {
                name: t("equipmentDetail.energyStoragePower"),
                symbol: "none", // 取消小圆点
                data: systemActivePower,
                type: "line",
                lineStyle: {
                  color: "#64B7F6", // 修改线条颜色为红色
                },
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(39, 46, 78, 0.9)", // 渐变起始颜色，降低透明度
                      },
                      {
                        offset: 1,
                        color: "rgba(31, 40, 68, 0.9)", // 渐变结束颜色，降低透明度
                      },
                    ],
                  },
                },
              },
              {
                name: t("equipmentDetail.gridPower"),
                symbol: "none", // 取消小圆点
                data: gridActivePower,
                type: "line",
                lineStyle: {
                  color: "#805EDA", // 修改线条颜色为红色
                },
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(55, 55, 67, 0.9)", // 渐变起始颜色，降低透明度
                      },
                      {
                        offset: 1,
                        color: "rgba(38, 43, 57, 0.9)", // 渐变结束颜色，降低透明度
                      },
                    ],
                  },
                },
              },
              {
                name: t("equipmentDetail.loadPower"),
                symbol: "none", // 取消小圆点
                data: loadActivePower,
                type: "line",
                // smooth: true,
                lineStyle: {
                  color: "#FFA200", // 修改线条颜色为红色
                },
                areaStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(47, 57, 77, 0.9)", // 渐变起始颜色，降低透明度
                      },
                      {
                        offset: 1,
                        color: "rgba(33, 46, 65, 0.9)", // 渐变结束颜色，降低透明度
                      },
                    ],
                  },
                },
              },
            ],
            dataZoom: [],
          };
          powerChart.value = powerOption;
        } else {
          powerChart.value = {};
        }
      }
    });
  });
};
</script>

<style lang="scss" scoped>
.equipmentDetail {
  width: 100%;
  padding-bottom: 30rpx;
  box-sizing: border-box;

  .equipmentDetail-hedaer {
    width: 100%;
    padding-bottom: 40rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #08121e 0%, #132034 100%);
    border-radius: 0px 0px 32rpx 32rpx;

    .soc-view {
      width: 100%;
      position: relative;

      .operationalStatus {
        position: absolute;
        top: 45rpx;
        left: 560rpx;
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: normal;
        color: #bfbfbf;
        margin-bottom: 20rpx;
      }
    }

    .electricity-detail {
      width: 100%;
      margin-top: 58rpx;

      .electricity-detail-item {
        width: 100%;
        text-align: center;

        .number {
          font-family: D-DIN;
          font-size: 40rpx;
          font-weight: bold;
          text-align: center;
          font-variation-settings: "opsz" auto;
          color: #eeeeee;
        }

        .img {
          width: 60rpx;
          height: 3rpx;
          margin: 10rpx auto 20rpx;
        }

        .electricity-type {
          font-family: Alibaba PuHuiTi 3;
          font-size: 24rpx;
          font-weight: normal;
          text-align: center;
          font-variation-settings: "opsz" auto;
          color: #a0a2a1;
        }

        .unit {
          font-family: Alibaba PuHuiTi 3;
          font-size: 24rpx;
          font-weight: normal;
          text-align: center;
          font-variation-settings: "opsz" auto;
          color: #a0a2a1;
        }
      }
    }
  }

  .page-item {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    margin-top: 24rpx;
  }
}
</style>
